<div class="content">
  <div class="searchBox">
    <input [(ngModel)]="searchWord" type="text" placeholder="请输入设备名称">
    <span (click)="searchAsset()">搜索所有资产</span>
  </div>
  <div class="title">
    <div class="select-container">
      <app-select (change)="onOrderChange($event)" [(ngModel)]="orderType" class="selectBtn">
        <app-option *ngIf="assetStatus === AssetStatus.IDLE" [value]="0">最近入库</app-option>
        <app-option *ngIf="assetStatus === AssetStatus.IDLE" [value]="1">最早入库</app-option>
        <app-option [value]="2">设备价格</app-option>
      </app-select>
      <app-select (change)="onStatusChange($event)" [(ngModel)]="assetStatus" class="selectBtn">
        <app-option [value]="AssetStatus.IDLE">{{ StatusNameMap[AssetStatus.IDLE]}}</app-option>
        <app-option [value]="AssetStatus.USE">{{ StatusNameMap[AssetStatus.USE]}}</app-option>
        <app-option [value]="AssetStatus.ABANDONED">{{ StatusNameMap[AssetStatus.ABANDONED]}}</app-option>
        <app-option [value]="AssetStatus.BROKE">{{ StatusNameMap[AssetStatus.BROKE]}}</app-option>
        <app-option [value]="AssetStatus.MEND"> {{ StatusNameMap[AssetStatus.MEND]}}</app-option>
      </app-select>
      <app-select [(ngModel)]="search" (change)="onSearchChange($event)" class="selectBtn">
        <app-option [value]="SearchType.ALL">{{SearchTypeMap[SearchType.ALL]}}</app-option>
        <app-option [value]="SearchType.ASSETTYPE">{{SearchTypeMap[SearchType.ASSETTYPE]}}</app-option>
        <app-option *ngIf="assetStatus === AssetStatus.USE" [value]="SearchType.ASSETDEPARTMENT">{{SearchTypeMap[SearchType.ASSETDEPARTMENT]}}</app-option>
        <app-option *ngIf="assetStatus === AssetStatus.USE" [value]="SearchType.ASSETUSER">{{SearchTypeMap[SearchType.ASSETUSER]}}</app-option>
      </app-select>
      <app-select *ngIf="search === SearchType.ASSETTYPE" [(ngModel)]="assetType" (change)="onTypeChange($event)" class="selectBtn">
        <app-option *ngFor="let assetType of assetTypes" [value]="assetType.GDZCLB_DM">
          {{assetType.GDZCLBMC}}
        </app-option>
      </app-select>
      <app-select *ngIf="search === SearchType.ASSETUSER" [(ngModel)]="assetUserId" (change)="onUserChange($event)" class="selectBtn">
        <app-option *ngFor="let user of users" [value]="user.id">
          {{user.realName}}
        </app-option>
      </app-select>
      <app-select *ngIf="search === SearchType.ASSETDEPARTMENT" [(ngModel)]="assetDepartmentId" (change)="onDepartmentChange($event)" class="selectBtn">
        <app-option *ngFor="let department of departments" [value]="department.id">
          {{department.departName}}
        </app-option>
      </app-select>
    </div>
    <button mat-button color="primary" class="add-btn" (click)="onExportCode()" *ngIf="isAdmin">批量导出二维码</button>
    <button mat-button color="primary" class="add-btn" (click)="onOpenAdd()" *ngIf="isAdmin && assetStatus === AssetStatus.IDLE">入库</button>
  </div>
  <div class="grid">
    <table mat-table [dataSource]="assets| paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event? allToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (change)="$event ? selection.toggle(row): null"
            (click)="$event.stopPropagation()"
            [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="code">
        <th mat-header-cell *matHeaderCellDef>设备编号</th>
        <td mat-cell *matCellDef="let row ">{{ row.assetCode }}</td>
      </ng-container>

      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef>座位号</th>
        <td mat-cell *matCellDef="let row">{{ row.position}}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>设备类型</th>
        <td mat-cell *matCellDef="let row">{{ row.oaAssetType?.GDZCLBMC }}</td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>设备名称</th>
        <td class="overWords" mat-cell *matCellDef="let row ">{{ row.assetName }}</td>
      </ng-container>

      <ng-container matColumnDef="version">
        <th mat-header-cell *matHeaderCellDef>设备型号</th>
        <td class="overWords" mat-cell *matCellDef="let row">{{ row.assetVersion }}</td>
      </ng-container>

      <ng-container matColumnDef="brand">
        <th mat-header-cell *matHeaderCellDef>设备品牌</th>
        <td class="overWords" mat-cell *matCellDef="let row">{{ row.assetBrand }}</td>
      </ng-container>


      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>设备状态</th>
        <td mat-cell *matCellDef="let row">{{ StatusNameMap[row.assetStatus] }}</td>
      </ng-container>

      <!--<ng-container matColumnDef="num">-->
        <!--<th mat-header-cell *matHeaderCellDef>数量</th>-->
        <!--<td mat-cell *matCellDef="let row">{{ row.assetNum }}</td>-->
      <!--</ng-container>-->

      <ng-container matColumnDef="createDate">
        <th mat-header-cell *matHeaderCellDef>购买日期</th>
        <td mat-cell *matCellDef="let row">{{ row.buyDate | date: 'yyyy-MM-dd' }}</td>
      </ng-container>

      <ng-container matColumnDef="department">
        <th mat-header-cell *matHeaderCellDef>所属部门</th>
        <td mat-cell *matCellDef="let row">{{ row.sysDepartment?.departName }}</td>
      </ng-container>

      <ng-container matColumnDef="user">
        <th mat-header-cell *matHeaderCellDef>负责人</th>
        <td mat-cell *matCellDef="let row">{{ row.sysUser.realName }}</td>
      </ng-container>

      <ng-container matColumnDef="assetImg">
        <th mat-header-cell *matHeaderCellDef>设备图片</th>
        <td mat-cell *matCellDef="let row">
          <img *ngIf="row.assetImgUrl1" class="assetImg" [src]="row.assetImgUrl1" alt="" (click)="bigImg(row.assetImgUrl1)">
        </td>
      </ng-container>

      <ng-container matColumnDef="qrcode">
        <th mat-header-cell *matHeaderCellDef>二维码</th>
        <td mat-cell *matCellDef="let row">
          <img *ngIf="row.qrcodeUrl" class="qr-code" src="{{row.qrcodeUrl}}" alt="" (click)="bigImg(row.qrcodeUrl)"></td>
      </ng-container>

      <ng-container matColumnDef="operate">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let row">
          <button mat-button class="operateBtn" (click)="onOpenEdit(row)">编辑</button>
          <button mat-button class="operateBtn" (click)="onDelete(row.id)">删除</button>
          <button mat-button class="operateBtn" (click)="onAssign(row)">交割</button>
          <button mat-button class="operateBtn" (click)="assignHistory(row)">交割历史</button>
          <!--<button mat-button (click)="onUpdateCode(row.id)">更新二维码</button>-->
          <!--<button mat-button (click)="changeHistory(row)">更换历史</button>-->
        </td>
      </ng-container>
      <!--对应列名List.ts中定义-->
      <tr mat-header-row *matHeaderRowDef="cols"></tr>
      <tr mat-row *matRowDef="let data; columns: cols"></tr>

    </table>
    <app-pagination
      (pageChange)="onPageChanged($event)"
      [maxSize]="9"
      [isShowInput]="true"
      [isMiniMode]="false"
      [total]="total"
    >
    </app-pagination>
  </div>
  <div class="cover" *ngIf="imgAppear">
    <div class="bigImgbox">
        <span (click)="closeImg()">X</span>
        <img [src]="imgUrl" alt="">
    </div>
  </div>
</div>
